<template>
  <div>
    <div class="add">
      编号:<input type="text" v-model="num" /> 品牌名称:<input
        type="text"
        v-model="brandName"
      />
      <br />
      产品图片地址:<input type="text" v-model="imgSrc" />
      价格:<input type="text" v-model="price" />
      <input type="button" value="添加" @click="addList" />
    </div>
    <div>
      <table class="tb">
        <tr>
          <th>
            <input
              type="checkbox"
              v-model="allCheck"
              @change="allCheckChange"
            />
          </th>
          <th>产品图片</th>
          <th>编号</th>
          <th>品牌名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in productList" :key="item.id">
          <td>
            <input
              type="checkbox"
              v-model="checks"
              :value="item"
              @change="checkstt"
            />
          </td>
          <td>
            <img width="100" :src="item.productImg" />
          </td>
          <td>{{ item.productNum }}</td>
          <td>{{ item.productName }}</td>
          <td>{{ item.productPrice }}</td>
          <td>
            <button @click="decrease(item)">-</button>
            &nbsp; {{ item.count }} &nbsp;
            <button @click="increase(item)">+</button>
          </td>
          <td>
            <button @click="delList(item.id)">删除</button>
          </td>
        </tr>
      </table>
      <div class="add" style="text-align: center" v-if="!productList.length">
        没有更多数据了
      </div>
      <h2 class="add" style="text-align: right">总价格:{{ total }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allCheck: false,
      num: "",
      brandName: "",
      imgSrc: "",
      price: "",
      count: "",
      checks: [],
      productList: JSON.parse(localStorage.getItem("list")) || [],
    };
  },
  methods: {
    addList() {
      if (
        this.imgSrc !== "" ||
        this.num !== "" ||
        this.brandName !== "" ||
        this.price !== ""
      ) {
        let obj = {
          id: Math.random().toString(32).substring(2),
          // 产品图片
          productImg: this.imgSrc,
          // 产品编号
          productNum: this.num,
          // 产品名称
          productName: this.brandName,
          // 产品价格
          productPrice: this.price,
          // 产品数量
          count: 1,
        };
        this.productList.push(obj);
      } else {
        alert("请正确填写");
      }
      this.imgSrc = "";
      this.num = "";
      this.brandName = "";
      this.price = "";
    },
    delList(id) {
      this.productList = this.productList.filter((p) => {
        return id !== p.id;
      });
      this.checks = this.checks.filter((p) => {
        return id !== p.id;
      });

      if (this.productList.length === 0) {
        this.allCheck = false;
      }
    },
    allCheckChange() {
      if (this.allCheck) {
        this.checks = this.productList;
      } else {
        this.checks = [];
      }
    },
    checkstt() {
      if (this.checks.length === this.productList.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    decrease(item) {
      if (item.count > 1) {
        item.count--;
      }
    },
    increase(item) {
      item.count++;
    },
  },
  watch: {
    productList() {
      localStorage.setItem("list", JSON.stringify(this.productList));
    },
  },
  computed: {
    total() {
      let res = this.checks.reduce((total, item) => {
        return (total += item.count * item.productPrice);
      }, 0);
      return res.toFixed(2);
    },
  },
};
</script>
<style scoped>
#app {
  width: 800px;
}
.tb {
  border-collapse: collapse;
  width: 100%;
}
.tb th {
  background-color: pink;
}
.tb td,.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>